<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图标选择</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${ctx}/systemStatic/style/admin.css">
    <link rel="stylesheet" href="${ctx}/extends/zTree_v3/css/zTreeStyle/zTreeStyle.css"/>
    <link rel="stylesheet" href="${ctx}/iconfont/iconfont.css"/>
    <link rel="stylesheet" href="${ctx}/systemStatic/style/iconfont/iconfont.css">
    <link rel="stylesheet" href="${ctx}/css/public.css">
    <script type="text/javascript">
        var __ctx = "${ctx}";
    </script>
</head>
<body>
    <div style="position: relative" class="resIconSelect">
        <div style="width: 240px;padding: 0 10px;">
            <div class="resIconTree" style="">
                <div class="layui-form">
                    <div>
                        <p class="show-true colorSwitch" style="cursor: pointer;height: 30px;background:#009688;line-height: 30px;">
                            <span style="float: left;color: #fff">&nbsp;&nbsp;图标信息</span></p>
                        <div style="margin-top: 6px;" class="gscroll">
                            <ul class="ccpui-iconTree iconTrees">
                                <li><a class="iconfont iconshuaxin- zTrees-refresh" title="刷新"></a></li>
                                <li><a class="iconfont iconwenjianjia1-copy zTrees-triangle-d" title="展开"></a></li>
                                <li><a class="iconfont iconfolder1 zTrees-triangle-r" title="收起"></a></li>
                                <input type="text" style="width: 50%" class="resIconValue">
                            </ul>
                            <ul id="treeSelectIcon" class="ztree" style="background: #fff;height: 332px;overflow: auto"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="iconDiv" style="height: 406px;">
        </div>
        <div class="bottom" style="text-align: center;margin-top: 10px">
            <button class="layui-btn saveIcon">保存</button>
            <button class="layui-btn layui-btn-danger cancelIcon">取消</button>
        </div>
    </div>
    <script src="${ctx}/extends/jquery.min.js" type="text/javascript"></script>
    <script src="${ctx}/public/component.js" type="text/javascript"></script>
    <script src="${ctx}/layui/layui.js"></script>
    <script src="${ctx}/extends/zTree_v3/js/jquery.ztree.all.min.js" type="text/javascript"></script>
    <script src="${ctx}/extends/zTree_v3/js/jquery.ztree.exhide.min.js" type="text/javascript"></script>
    <script>
        layui.config({
            base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
        }).extend({
            index: 'index' //主入口模块
        }).use(['index','form', 'layer', 'table','commons','setter','jquery'], function() {
            var form = layui.form, layer = layui.layer, commons = layui.commons, setter = layui.setter, $ = layui.jquery;
            var iconClassName="";
            var commonIcon=['iconlong-arrow-up','iconlong-arrow-down','iconarrow-left','iconarrow-right','iconshuaxin-','iconwenjianjia1-copy','iconfolder1','iconyunduanxiazai','iconxiayibudefuben','iconshangyibu','iconaccount',
                'iconaccount-plus','icontupianjiazaishibai','iconxiaoxi','iconwenjianjia','iconunlock','iconyunduanshuaxin','iconzhihuan','iconshuaxin1','iconzhanghaoquanxianguanli',
                'iconshangyibu1','iconyunduanshangchuan','iconyouxupailie','iconposition','iconredo','iconplus-square','iconplus','iconxiayibu',
                'iconxiaoxitongzhi','iconicon_yingyongguanli','iconPIR','iconwuxupailie','iconminus','iconminus-square','iconweizhigeshi','iconwentijieda','iconicon_workfile_line',
                'iconwaiting','iconicon_setting_fill','iconuser-group','icontianshenpi','iconundo','iconkongjianyixuan','iconicon_search','iconkey','icontimes-circle','icontimes',
                'icontianxie','iconicon_zhanghao','iconsync-alt','iconshiyongwendang','iconicon_skin','iconicon_tianjia','iconicon_signal','iconshanchu','iconsearch-plus',
                'iconsearch-minus','iconlong-arrow-up-right','iconlong-arrow-up-left','iconlong-arrow-down-right','iconlong-arrow-down-left',
                'iconsearch','iconrenwujincheng','iconquestion-circle','iconicon_share','iconicon_roundadd','iconicon_renwujincheng','iconplus-circle','iconlock','iconliebiao',
                'iconminus-circle','iconicon_shiyongwendang','iconicon_refresh','iconicon_workset','iconicon_voipphone','iconicon_file','iconicon_addperson','iconkongxinduigou',
                'iconicon_photo_fill','iconicon_GPS','iconicon_meeting','iconicon_roundclose','iconicon_workmore','iconicon_work','iconicon_phone','iconicon_yiwenkongxin',
                'iconicon_compile','iconicon_baocun','iconicon_cloud_history','iconhezuohuobanmiyueguanli','iconicon_shezhi','iconfolder','iconicon_principal','iconicon_group',
                'iconicon_roundreduce','iconguanbi','iconicon_photo','iconicon_dispose','iconicon_boss','iconfangkuai','iconicon_delete','icondakai',
                'iconicon_collect','iconfuzhi','icongaojing_','iconicon_addressbook','icongongdan','iconclouddownload','iconcloudupload','iconclock',
                'iconchaxun','iconcheck-circle','iconbianjisekuai','iconshuaxin','icontupiantianjia','iconjiankong','iconshuxian','iconanfang','iconfeiji','iconditu','icongangkou','icondang',
                'iconxinjian'
            ];
            var social=['iconaixin','iconwind-smile','iconwind-cry','iconicon_wechat','iconicon_service','iconkefu','iconmail','iconicon_sms','iconicon_qq','iconicon_send',
                'iconicon_message','iconicon_dmail','iconicon_voice','iconicon_likegood','iconicon_at','iconicon_fabu','iconicon_link','iconicon_dingtalk_line','iconicon_community_line',
                'iconfabu','iconicon_addmessage','iconcomment-dots','iconaliwangwang',
            ];
            var media=['iconstopcircle','iconyunhang','iconmobile-alt','iconquanping','iconishipinshixiao','icontraining',
                'iconicon_live','iconicon_wangye','iconshexiangtou_guanbi','iconshexiangtou','iconshengyinjingyin','iconquxiaolianjie','iconicon_horn','iconpoweroff',
                'iconplaycircle','iconpausecircle','iconicon_video','iconlaptop','iconguangbo','iconicon_airplay','iconicon_camera','iconicon_im_voice','iconhuanyuanhuabu',
                'iconAPPkaifa',
            ];
            var life=['iconxiyiji','iconyijiankaiguan','iconzihangche','icontransanction','iconrentijiance','iconyanwubaojingqi','iconxinhao',
                'iconjinggai','iconqiche','iconwuxiandianbo','iconWIFI','iconlubiantingchechang','iconluyouqi','iconlanya','iconicon_sport','iconshuibiao','iconshoppingcart',
                'iconscan','iconicon_signin_line','iconqrcode','iconrank','iconqichedingwei','iconicon_redpacket','iconlumingpai','iconjietouzuoyi','iconjiaotongbiaozhipai',
                'iconmap','iconludeng','iconicon_square','iconkaiguan','iconicon_hardware_fill','iconjianceqi','iconicon_QRcode','iconicon_scan','iconicon_glass','iconicon_homepage',
                'iconicon_alipay_line','iconicon_coinpurse_line','icongongyezujian-yibiaopan','iconfanshe','iconchazuo','iconchengshi','iconchatou','iconbingxiang',
            ];
            var office=['iconzuoduiqi','iconzuzhixiaxia','iconzitishangbiao','iconyouduiqi','iconzitixieti','iconzhihangfankui','iconalign-center','iconxingzhuang-wenzi',
                'iconzuoyouduiqi','iconzitiyanse','iconzitixiahuaxian','iconzitixiabiao','iconzitishanchuxian','iconzitijiacu','iconzitibiaoti','iconyishouquan','iconzhongwen',
                'iconzhexiantu','iconshujukanban','iconyingwen','iconshebeizhuangtai','iconpic-center','iconjuzhongduiqi','icontubiao-zhuzhuangtu','icontubiao-bingtu','iconshebeiguanli',
                'iconrenjijiaohu','iconquanxianshenpi','iconpaperclip','iconmiwen','iconicon_im_keyboard','iconicon_addresslist','iconicon_statistics','icongongdanqueren','iconicon_doc',
                'iconDOC','iconicon_index_line',
            ];
            var other=['iconyuanquyunwei','iconxingzhuang-sanjiaoxing','iconwind-loading','iconzidingyi','iconzitidaima','iconzuzhiqunzu','iconzitiyulan','iconyunyingguanli',
                'iconyouhui','iconyingjian','iconruanjiankaifabao','iconxingzhuang-tuoyuanxing','iconxingzhuang-juxing','iconxingzhuang-jianxing','iconmoshubang',
                'iconmenci','iconlike','iconwangguan','iconleft-arrow-rect','icontubiao-qiapian','iconterminal','iconicon_synergy','icontag','iconshujuwajue','iconicon_namecard',
                'iconshoucang','iconicon_medal','iconshebeikaifa','iconicon_study','iconranqijianceqi','iconicon_rukou','iconicon_invite','iconicon_gift','iconkuaisubianpai','iconjs',
                'iconlaptop-check','iconiframetianjia','iconicon_subordinate','iconlightbulb','iconjishufuwu','iconicon_yulan','iconicon_railway','iconicon_exchange','iconlink',
                'iconicon_scan_namecard','iconjinggao','iconicon_discovery','iconicon_little_taget','iconicon_warn','iconicon_newgroup',
                'iconguize1','iconicon_Eapp_line','iconicon_nomemo','iconhanshu','iconicon_cspace','iconguanlianshebei','iconanquan',

            ];
            var layuiIcon=['layui-icon-rate-half','layui-icon-rate','layui-icon-rate-solid','layui-icon-cellphone','layui-icon-vercode','layui-icon-login-wechat',
            'layui-icon-login-qq','layui-icon-login-weibo','layui-icon-password','layui-icon-username','layui-icon-refresh-3','layui-icon-auz','layui-icon-spread-left',
            'layui-icon-shrink-right','layui-icon-snowflake','layui-icon-tips','layui-icon-note','layui-icon-home','layui-icon-senior','layui-icon-refresh','layui-icon-refresh-1',
            'layui-icon-flag','layui-icon-theme','layui-icon-notice','layui-icon-website','layui-icon-console','layui-icon-face-surprised','layui-icon-set',
            'layui-icon-template-1','layui-icon-app','layui-icon-template','layui-icon-praise','layui-icon-tread','layui-icon-male','layui-icon-female',
            'layui-icon-camera','layui-icon-camera-fill','layui-icon-more','layui-icon-more-vertical','layui-icon-rmb','layui-icon-dollar','layui-icon-diamond',
            'layui-icon-fire','layui-icon-return','layui-icon-location','layui-icon-read','layui-icon-survey','layui-icon-face-smile','layui-icon-face-cry',
            'layui-icon-cart-simple','layui-icon-cart','layui-icon-next','layui-icon-prev','layui-icon-upload-drag','layui-icon-upload','layui-icon-download-circle',
            'layui-icon-component','layui-icon-file-b','layui-icon-user','layui-icon-find-fill','layui-icon-loading','layui-icon-loading-1','layui-icon-add-1',
            'layui-icon-play','layui-icon-pause','layui-icon-headset','layui-icon-video','layui-icon-voice','layui-icon-speaker','layui-icon-fonts-del',
            'layui-icon-fonts-code','layui-icon-fonts-html','layui-icon-fonts-strong','layui-icon-unlink','layui-icon-picture','layui-icon-link','layui-icon-face-smile-b',
            'layui-icon-align-left','layui-icon-align-right','layui-icon-align-center','layui-icon-fonts-u','layui-icon-fonts-i','layui-icon-tabs','layui-icon-radio',
            'layui-icon-add-circle-fine','layui-icon-ok-circle','layui-icon-close','layui-icon-close-fill','layui-icon-star-fill','layui-icon-star','layui-icon-top',
                'layui-icon-chat','layui-icon-help','layui-icon-ok','layui-icon-release','layui-icon-list','layui-icon-face-smile-fine','layui-icon-picture-fine',
                'layui-icon-log','layui-icon-menu-fill','layui-icon-reply-fill','layui-icon-friends','layui-icon-group','layui-icon-set-fill','layui-icon-search',
                'layui-icon-circle-dot','layui-icon-right','layui-icon-left','layui-icon-down','layui-icon-up','layui-icon-about','layui-icon-404',
                'layui-icon-add-circle','layui-icon-set-sm','layui-icon-file','layui-icon-triangle-r','layui-icon-triangle-d','layui-icon-engine','layui-icon-chart-screen',
                'layui-icon-chart','layui-icon-table','layui-icon-tree','layui-icon-upload-circle','layui-icon-templeate-1','layui-icon-util','layui-icon-layouts',
                'layui-icon-prev-circle','layui-icon-carousel','layui-icon-code-circle','layui-icon-water','layui-icon-date','layui-icon-layer','layui-icon-fonts-clear',
                'layui-icon-dialogue','layui-icon-cellphone-fine','layui-icon-form','layui-icon-delete','layui-icon-share','layui-icon-edit','layui-icon-circle'];

            var qbdmsIcon=['data-iconcommon_tixing','data-iconcommon_push1','data-iconcommon_follow-solid','data-iconcommon_follow','data-iconcommon_upload',
            'data-iconcommon_edot','data-iconcommon_shoucang','data-iconcommon_shoucang-solid','data-iconcommon_edit1','data-iconcommon_out','data-iconcommon_leftopen',
            'data-iconcommon_leftclose','data-iconquality-fdjgl','data-iconquality-zldwgl','data-iconquality-zlcbgl','data-iconquality-zlztgl','data-iconquality-zsgl',
            'data-iconquality-zlwhgl','data-iconquality-zljszc','data-iconquality-zlgltx','data-iconquality-zlzhfx','data-iconquality-zljcxx','data-iconquality-zlwt2',
            'data-iconquality-fxsy1','data-iconcommon_close','data-iconcommon_fujian','data-iconcommon_upsanjiao','data-iconcommon_downsanjiao','data-iconcommon_refresh',
            'data-iconcommon_leftarrow','data-iconcommon_rightarrow','data-iconcommon_downarrow','data-iconcommon_uparrow','data-iconcommon_home'];
            for (var i = 0; i < commonIcon.length; i++) {
                $(".iconDiv").append("<span class='iconfont " + commonIcon[i] + "'></span>");
            }
            var zNodes = [
                { id:1, pId:0, name:"图标分类", open:true},
                { id:11, pId:1, name:"常用"},
                { id:12, pId:1, name:"社交"},
                { id:13, pId:1, name:"媒体"},
                { id:14, pId:1, name:"生活"},
                { id:15, pId:1, name:"办公"},
                { id:16, pId:1, name:"layui图标"},
                { id:17, pId:1, name:"其他"},
                { id:18, pId:1, name:"qbdms"}
            ];
            var setting = {
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                view: {
                    nameIsHTML: true, //允许name支持html
                    selectedMulti: false
                },
                edit: {
                    enable: false,
                    editNameSelectAll: false
                },
                callback: {
                    onClick: onClickRes,
                }
            };
            $(document).ready(function(){
                $.fn.zTree.init($('#treeSelectIcon'), setting, zNodes);
                component.fuzzySearch('treeSelectIcon', '.resIconValue', null, true); //初始化模糊搜索方法
            });

            //展开
            $(".iconTrees .zTrees-triangle-d").click(function () {
                $.fn.zTree.getZTreeObj("treeSelectIcon").expandAll(true);
            });
            //收起
            $(".iconTrees .zTrees-triangle-r").click(function () {
                $.fn.zTree.getZTreeObj("treeSelectIcon").expandAll(false);
            });
            //刷新
            $(".iconTrees .zTrees-refresh").click(function () {
                resZtrees();
            });
            var iconType='iconfont';
            function onClickRes(event, treeId, treeNode) {
                var iconArray='';
                switch (treeNode.id) {
                    case 11:
                        iconArray=commonIcon;
                        iconType='iconfont';
                        break;
                    case 12:
                        iconArray=social;
                        iconType='iconfont';
                        break;
                    case 13:
                        iconArray=media;
                        iconType='iconfont';
                        break;
                    case 14:
                        iconArray=life;
                        iconType='iconfont';
                        break;
                    case 15:
                        iconArray=office;
                        iconType='iconfont';
                        break;
                    case 16:
                        iconArray=layuiIcon;
                        iconType='layuiIcon';
                        break;
                    case 17:
                        iconArray=other;
                        iconType='iconfont';
                        break;
                    case 18:
                        iconArray=qbdmsIcon;
                        iconType='iconfont';
                        break;
                }
                $(".iconDiv").empty();
                var iconClass='iconfont ';
                if(treeNode.id==16){
                    iconClass='layui-icon '
                }
                for (var i = 0; i < iconArray.length; i++) {
                    $(".iconDiv").append("<span class='"+iconClass+ iconArray[i] + "'></span>");
                }
                // $(".iconDiv span").click(function () {
                //     $(this).css("color","red").siblings().css('color', '#666');
                //     iconClassName=$(this).attr('class').trim().split(" ");
                //     return false;
                // });
                return false;
            };
            $(document).on("click", ".iconDiv span", function () {
                $(this).css("color","red").siblings().css('color', '#666');
                String.prototype.trim = function () {
                    return this.replace(/^\s*|\s*$/g, "");
                }
                iconClassName= $.trim($(this).attr('class')).split(" ");
                return false;
            });
            $(".saveIcon").click(function () {
                $('#iconShow', window.parent.document).removeClass();
                if(iconType=='layuiIcon'){
                    $('#iconShow', window.parent.document).addClass('ztreeIcon layui-icon '+iconClassName[1]);
                }else{
                    $('#iconShow', window.parent.document).addClass('ztreeIcon iconfont '+iconClassName[1]);
                }
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            });
            $(".cancelIcon").click(function () {
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            })
        })
    </script>
    <style>
        .resIconSelect .iconDiv{
            position: absolute;
            top:0;
            left:260px;
            width: 590px;
            height: 489px;
            overflow: auto;
            background: #fff;
        }
        .resIconSelect .iconDiv span{
            margin:10px;
            cursor: pointer;
            display: inline-block;
        }
    </style>
</body>
</html>
<link rel="stylesheet" href="${ctx}/css/font/iconfontie.css" media="all"/>
<link rel="stylesheet" href="${ctx}/iconfont/iconfont.css"/>